import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Spin } from "antd"
import { toJS } from "mobx"
import RectifierModule from "../Module/components/RectifierModule"
import More from "../More"
import SceneModal from "../ScreenModal"
import Chart from "./chart.js"

import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Overview extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  state = {}
  handleClick = () => {
    const { confim } = this.store
    confim("photovoltaic-module")
  }

  componentWillMount() {
    const { getPueChart } = this.store
    getPueChart()
  }
  render() {
    const { pueChart, pueLoading } = this.store
    // const data = (rectifierModule && rectifierModule.rectifierModules) || [];

    return (
      <div styleName="module-container">
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>PUE</div>
        </div>
        <div styleName={"chart-container"}>
          <Spin spinning={pueLoading}>
            <Chart data={pueChart} />
          </Spin>
        </div>
        {/* <More handleClick={this.handleClick} />
        <SceneModal type={"photovoltaic-module"} title={"光伏模块"}>
          111
        </SceneModal> */}
      </div>
    )
  }
}

export default Overview
